<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="小米商城/css/bootstrap.css">
    <link rel="shortcut icon" href="小米商城/img/favicon.ico" type="imgage/x-icon">
    <style>


        #topbar {
            width: 100%;
            height: 40px;
            background: #333333;
            line-height: 40px;
        }

        #topbar a {
            line-height: 40px;
            color: #b0b0b0;
            text-decoration: none;
            font-size: 12px;

        }

        #topbar span {
            color: #424242;
            margin: 0.5em;
        }

        #topbar a:hover {
            text-decoration: none;
            color: #FFFFFF;
        }

        .top {
            width: 100%;
            height: 200px;
        }

        ul {
            list-style: none;
            margin: 0px auto;
        }

        ul > li {
            float: left;
            margin: 0px 5px;
        }

        .first-view {
            width: 100%;
            height: 6914px;
            background: #f5f5f5;
        }

        .home-hero-container {
            position: relative;
            width: 1226px
            z-index: 10;
        }

        .home-hero {
            position: relative;
            margin-bottom: 26px;
        }

        .home-hero-top {
            position: relative;
            height: 460px;
            overflow: hidden;
        }

        .paper-item {
            margin: 0px auto;
            width: 1226px;
            height: 460px;
            text-align: center;
            /*position: relative;*/
        }

        /*#prev{*/
        /*position: absolute;*/
        /*top: 50%;*/
        /*}*/
        /*#next{*/
        /*position: absolute;*/
        /*right: 0px;*/
        /*top: 50%;*/
        /*}*/

        .page-main {
            width: 100%;
            height: 686px;
            margin: auto;
            text-align: center;
            background: #f5f5f5;
        }

        #right a:hover {
            text-decoration: none;
            color: black;
        }

        .row {
            width: 1226px;
            height: 58px;
            margin: 0px auto;
        }

        #middle {
            width: 1226px;
            height: 626px;
            margin: 0px auto;
            background: #f5f5f5;

        }

        #left {
            width: 234px;
            height: 614px;
            margin: 0px auto;
            float: left;
        }

        #right {
            width: 990px;
            height: 614px;
            margin: 0px auto;
            float: right;
            background: #f5f5f5;

        }

        .desc {
            margin: 0px 10px 10px;
            height: 18px;
            font-size: 12px;
            text-align: center;
            color: #b0b0b0;
        }

        #right a {
            color: black;
        }

        .num {
            margin: 0 10px 14px;
            color: red;
            text-align: center;
        }

        .price del {
            color: #b0b0b0;
        }

        .brick-item {
            position: relative;
            width: 234px;
            height: 280px;
            margin-left: 10px;
            margin-bottom: 45px;
            background: #FFFFFF;
            float: left;
        }

        .flag-new {
            position: absolute;
            top: 31px;
            left: 50%;
            width: 64px;
            height: 20px;
            margin: -32px;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            color: #FFFFFF;
            background-color: #83c44e;
        }

        .brick-item a img {
            margin: 20px auto;
        }

        .home-banner-box img {
            margin: 28px 0 2px;
        }

    </style>
</head>
<body>

<div id="topbar">
    <ul>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.miui.com/" target="_blank">MIUI</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://iot.mi.com/index.html">loT</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="https://www.mi.com/index.html">小米商城</a>
        </li>

    </ul>
</div>
<div class="top">

</div>
<div class="home-hero-container container">
    <div class="home-hero">
        <div class="home-hero-top">
            <div class="paper-item">
                <button id="prev" onclick="getPrev()">上一张</button>
                <img id="imgRotation" src="img/paper3.jpg" alt="" width="1226px" height="460px">
                <button id="next" onclick="getNext()">下一张</button>
            </div>

        </div>
    </div>
</div>
<div class="page-main">
    <div class="first-view container">
        <div class="row">
            <h1 style="float: left;font-size: 22px;font-weight: 200;color: #333 ">手机</h1>
            <h2 style="float: right;color: #424242;font-size: 16px"><a href="https://www.mi.com/p/1915.html">查看全部 </a>
            </h2>
        </div>
        <div id="middle">
            <div id="left">
                <img src="小米商城/img/1.jpg" width="234px" hight="614px" alt="">
            </div>
            <div id="right">
                <div class="brick-item">
                    <a href="https://www.mi.com/mi9/" target="_blank">
                        <img src="小米商城/img/2.jpg" width="160px" hight="160px" alt="">
                        <br>小米9 6G+128G
                    </a>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price">
                        <span class="num">1499元</span>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/mi9se/" target="_blank">
                        <img src="小米商城/img/3.jpg" width="160px" hight="160px" alt="">
                        <br>小米9 SE 6GB+64GB
                    </a>
                    <p class="desc">索尼4800万超广角三摄，骁龙712</p>
                    <p class="price">
                        <span class="num">1999元</span>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/redminote7/" target="_blank">
                        <img src="小米商城/img/4.jpg" width="160px" hight="160px" alt="">
                        <br>Redmi Note 7 3GB+32GB
                    </a>
                    <p class="desc">4800万拍照千元机，18个月超长质保</p>
                    <p class="price">
                        <span class="num">999元</span>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/miplay/" target="_blank">
                        <img src="小米商城/img/5.png" width="160px" hight="160px" alt="">
                        <br>小米Play 4GB+64GB
                    </a>
                    <p class="desc">5.84"小水滴全面屏，后置1200万 AI 双摄</p>
                    <p class="price">
                        <span class="num">1099元</span>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/mi8youth/" target="_blank">
                        <img src="小米商城/img/6.jpg" width="160px" hight="160px" alt="">
                        <br>小米8青春版 6GB+64GB
                    </a>
                    <p class="desc">潮流镜面渐变色，2400万自拍旗舰</p>
                    <p class="price">
                        <span class="num">1499元</span>
                        <del>
                            <span>1699元</span>
                        </del>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/mi8i/" target="_blank">
                        <img src="小米商城/img/7.jpg" width="160px" hight="160px" alt="">
                        <br>小米8 SE 6GB+64GB
                    </a>
                    <p class="desc">三星 AMOLED 全面屏，骁龙710</p>
                    <p class="price">
                        <span class="num">1599元</span>
                        <del>
                            <span>1999元</span>
                        </del>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://item.mi.com/product/10000091.html" target="_blank">
                        <img src="小米商城/img/8.jpg" width="160px" hight="160px" alt="">
                        <br>小米6X 6GB+128GB
                    </a>
                    <p class="desc">轻薄美观的拍照手机</p>
                    <p class="price">
                        <span class="num">1549元</span>
                        <del>
                            <span>1999元</span>
                        </del>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
                <div class="brick-item">
                    <a href="https://www.mi.com/redmi6a/" target="_blank">
                        <img src="小米商城/img/9.jpg" width="160px" hight="160px" alt="">
                        <br>红米6A 2GB+16GB
                    </a>
                    <p class="desc">12nm高性能处理器，1300万高清相机</p>
                    <p class="price">
                        <span class="num">549元</span>
                        <del>
                            <span>599元</span>
                        </del>
                    </p>
                    <div class="flag-new">新品</div>
                </div>
            </div>
        </div>
        <div class="home-banner-box">
            <a href="http://s1.mi.com/m/ghd/2019/xjb0310/" target="_blank">
                <img src="//i1.mifile.cn/a4/xmad_15531711416212_ZCfRS.jpg" width="1226px" alt="">
            </a>
        </div>
    </div>
</div>
<script>
    var index = 3;

    function getPrev() {
        index--;
        var ele = document.getElementById("imgRotation");
        if (index == 0) {
            index = 5;
        }
        var path = "img/paper" + index + ".jpg";
        ele.src = path;
    }

    function getNext() {
        index++;
        var ele = document.getElementById("imgRotation");
        if (index == 6) {
            index = 1;
        }
        var path = "img/paper" + index + ".jpg";
        ele.src = path;
    }

    function init() {
        setInterval("getNext()", 4000);
    }
</script>
</body>
</html>